import * as Form from "@radix-ui/react-form";
import "./teachchForm.css";
import { baseInfoPersonForm2 } from "../utils/data";
import { createBaseInfoCompany } from "../apis/form";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import logo from "../assets/dance-logo.jpg";
import { useState } from "react";
import { pca, pcaa } from "area-data"; // v3 or higher
import "react-area-linkage/dist/index.css"; // v2 or higher
import { AreaSelect, AreaCascader } from "react-area-linkage";

const FormDemo = () => {
  const [category, setCategory] = useState(null);
  const [area, setArea] = useState([]);
  const [alreadySubmit, setAlreadySubmit] = useState(false);

  const handleSubmit = async (event) => {
    const data = Object.fromEntries(new FormData(event.currentTarget));

    event.preventDefault();
    // 这里可以添加提交表单的逻辑
    if (area?.length === 0) {
      toast.error("请选择地区");
      return;
    }
    data.region = area?.join("/");
    data.studentAgeRange = `${data.studentAgeRangeBegin} - ${data.studentAgeRangeEnd}`;
    console.log("Submitted name:", data);
    const resp = await createBaseInfoCompany(data);
    console.log(resp, resp.data?.code);
    if (resp.data?.code === 0) {
      toast.success("申请成功");
      setAlreadySubmit(true);
    } else {
      toast.error(resp?.data?.msg);
    }
  };

  const handleAreaChange = (val) => {
    console.log("area", val);
    setArea(val);
  };

  const renderFormItem = (item) => {
    switch (item.type) {
      case "select":
        return (
          <Form.Control asChild className="mt-[10px]">
            <select
              className="Input"
              required
              onChange={(e) => {
                if (item.key === "category") {
                  setCategory(e.target.value);
                }
              }}
            >
              {item.options?.map((item) => {
                return (
                  <option value={item.value} key={item.value}>
                    {item.label}
                  </option>
                );
              })}
            </select>
          </Form.Control>
        );

      case "textarea":
        return (
          <Form.Control asChild className="mt-[10px]">
            <textarea className="Textarea" rows="4" required wrap="hard" />
          </Form.Control>
        );

      case "number":
        return (
          <Form.Control asChild className="mt-[10px]">
            <input
              className="Input"
              type="number"
              required
              inputMode="numeric"
              pattern="\d*"
            />
          </Form.Control>
        );

      // case "rangenumber":
      //   return (
      //     <Form.Control asChild className="mt-[10px]">
      //       <RangeNumber></RangeNumber>
      //     </Form.Control>
      //   );

      // case "area":
      //   return (
      //     <Form.Control asChild className="mt-[10px]">
      //       <Cascader
      //         className="w100"
      //         options={chinaArea}
      //         placeholder="选择地区"
      //         changeOnSelect
      //       />
      //     </Form.Control>
      //   );
      case "area":
        return (
          <div className="flex">
            <AreaSelect
              type="text"
              level={2}
              data={pca}
              onChange={handleAreaChange}
            />
          </div>
        );

      case "date":
        return (
          <Form.Control asChild className="mt-[10px]">
            <input
              type="date"
              className="Date"
              name={item.key}
              required
              defaultValue={item.default}
            />
          </Form.Control>
        );
    }

    return (
      <Form.Control asChild className="mt-[10px]">
        <input className="Input" required />
      </Form.Control>
    );
  };

  return (
    <div>
      <ToastContainer></ToastContainer>

      <div className="px-[20px] py-[20px] text-center flex justify-center mb-[10px] mt-[20px] logoContainer pb-[20px] pt-[10px] flex-col items-center">
        <img className="w-[160px] mb-[40px]" src={logo} alt="" />
        <h2 className=" text-[24px] font-bold text-center">
          中华儿童文化艺术促进会舞蹈专业委员会合作单位申请
        </h2>
        <div
          className="mt-[20px]"
          style={{
            textAlign: "left",
            lineHeight: "26px",
            letterSpacing: "1px"
          }}
        >
          <h3 className="text-[20px] mb-[5px]">合作单位申请条件</h3>
          <div>1、有独立法人资质，具备符合当地政府要求的正规舞蹈培训机构；</div>
          <div>2、建校时间在3年以上；</div>
          <div>3、培训场地总面积达到200平米以上；</div>
          <div>4、在籍总学员人数达到100人以上；</div>
          <div>5、全职教师2名以上；</div>
          <div>6、具有机构独立公众号/抖音账号/视频号/网站/大众点评账号；</div>
          <div>7、办学期间无出现重大教学事故/出现重大征信问题；</div>
          <div>8、认可中华儿童文化艺术促进会舞蹈专业委员会管理章程，愿意为社会舞蹈教育普及推广工作做出贡献者。</div>
         
        </div>
      </div>

      <div className="px-[20px] py-[20px]">
        <Form.Root className="FormRoot" onSubmit={handleSubmit}>
          {baseInfoPersonForm2.map((item) => {
            if (item.key === "serialNumber" && category !== "expiry")
              return null;

            if (item.type === "rangenumber")
              return (
                <>
                  <div>
                    <div className="FormLabel font-bold">{item.label}</div>
                  </div>
                  <div className="flex gap-[10px] " key={item.key}>
                    <Form.Field
                      key={item.key}
                      className="FormField flex-1"
                      name={item.key + "Begin"}
                    >
                      <div className="flex gap-[10px] ">
                        <Form.Control
                          asChild
                          className="mt-[10px]"
                          name="studentAgeRangeBegin"
                        >
                          <input
                            placeholder="最小年龄"
                            className="Input"
                            type="number"
                            required
                            name="studentAgeRangeBegin"
                            min={3}
                            max={100}
                            inputMode="numeric"
                            pattern="\d*"
                          />
                        </Form.Control>
                      </div>
                      <Form.Message
                        className="FormMessage mt-[10px] text-[red]"
                        match="valueMissing"
                      >
                        请填写{item.label}
                      </Form.Message>
                    </Form.Field>
                    <Form.Field
                      key={item.key}
                      className="FormField flex-1"
                      name={item.key + "End"}
                    >
                      <div className="flex gap-[10px]">
                        <Form.Control asChild className="mt-[10px]">
                          <input
                            placeholder="最大年龄"
                            className="Input"
                            type="number"
                            required
                            min={3}
                            max={100}
                            inputMode="numeric"
                            pattern="\d*"
                          />
                        </Form.Control>
                      </div>
                      <Form.Message
                        className="FormMessage mt-[10px] text-[red]"
                        match="valueMissing"
                      >
                        请填写{item.label}
                      </Form.Message>
                    </Form.Field>
                  </div>
                </>
              );

            return (
              <Form.Field key={item.key} className="FormField" name={item.key}>
                <div>
                  <Form.Label className="FormLabel font-bold">
                    {item.label}
                  </Form.Label>
                </div>
                {renderFormItem(item)}
                {item.key === "contactPhone" && (
                  <Form.Message
                    className="FormMessage mt-[10px] text-[red]"
                    match={(val) => {
                      console.log("val", val, val?.length, val?.length === 11);
                      return val?.length !== 11;
                    }}
                  >
                    请输入正确的电话
                  </Form.Message>
                )}
                {item.key === "description" && (
                  <Form.Message
                    className="FormMessage mt-[10px] text-[red]"
                    match={(val) => {
                      return val?.length < 200;
                    }}
                  >
                    请输入200字以上的单位介绍
                  </Form.Message>
                )}
                {/* {item.type === "number" && (
                <Form.Message
                  className="FormMessage mt-[10px] text-[red]"
                  match={(val) => {
                    console.log("val", val);
                    return isNaN(parseInt(val));
                  }}
                >
                  请输入数字
                </Form.Message>
              )} */}
                <Form.Message
                  className="FormMessage mt-[10px] text-[red]"
                  match="valueMissing"
                >
                  请填写{item.label}
                  {item.type === "number" && "(数字)"}
                </Form.Message>
              </Form.Field>
            );
          })}

          <Form.Submit asChild>
            <button
              type="submit"
              className="Button mt-[20px]"
              disabled={alreadySubmit}
            >
              提交
            </button>
          </Form.Submit>
        </Form.Root>
      </div>
    </div>
  );
};

export default FormDemo;
